<style lang="less" scoped>
.pv-chart {
    margin-top: 30px;
}
</style>

<template>
    <div>
        <div class="pv-chart" id="pvChart" :style="{ width: '80%', height: '80%' }"></div>
    </div>
</template>

<script>
import echarts from "echarts";
import {getLimitText} from '@/lib/util.js'

// import echarts from "echarts/lib/echarts";
// require('echarts/lib/chart/map')
// require('echarts/lib/chart/bar')
// require('echarts/lib/chart/line')
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')

export default {
    data () {
        return {
            dataList: []
        }
    },
    mounted () {
        this.getDataList().then(() => {
            this.draw()
        })
    },
    methods: {
        getDataList () {
            return this.axios
                .get("/stat/getHourGroup", {
                    params: { date: '2023-01-30' },
                    hideLoading: true
                })
                .then((res) => {
                    this.dataList = res.data
                });
        },
        getFormatData (data) {
            let xData = Array(24).fill(1).map((item,index) => index)
            let urlMap = {}
            data.forEach(item => {
                if (!item.url) {
                    item.url = '其他'
                }
                if (!urlMap[item.url]) {
                    urlMap[item.url] = xData.map(() => 0)
                }
                urlMap[item.url][+item.hour] += item.count
            })
            return { xData,  urlMap}
        },
        draw() {
            let {xData,  urlMap} = this.getFormatData(this.dataList)
            var myChartContainer = document.getElementById("pvChart"); //绑定div容器
            var resizeMyChartContainer = function () {
                myChartContainer.style.width = 100 + "%";

                myChartContainer.style.height = window.innerHeight * 0.5 + "px";
            };
            resizeMyChartContainer();
            var pvChart = echarts.init(myChartContainer);
            // 绘制图表
            var optionMap = {
                tooltip: {
                    trigger: 'axis',
                    extraCssText: "max-width:400px;text-overflow:ellipsis;overflow:hidden;",//滚动条
                    axisPointer: {
                        label: {
                            formatter (params) {
                                return `${params.value.toString().padStart(2,0)}:00:00~${params.value.toString().padStart(2,0)}:59:59`
                            }
                        },
                    },
                    // formatter (params) {
                    //     console.log(params)
                    //     return `
                    //         <div>${params[0].axisValueLabel}</div>
                    //     `+params.map(item => `<div>${item.seriesName + item.axisValue}</div>`).join('')
                    // }
                },
                legend: {
                    data: Object.keys(urlMap),
                    formatter (value) {
                        return getLimitText(value, 60)
                    },
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                    saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xData
                },
                yAxis: {
                    type: 'value'
                },
                series: Object.entries(urlMap).map(item => {
                    return {
                        name: item[0],
                        type: 'line',
                        // stack: 'Total',
                        data: item[1]
                    }
                })

            };
            pvChart.setOption(optionMap);
            window.onresize = function () {
                resizeMyChartContainer();
                pvChart.resize();
            };
        },
    },
};
</script>